<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="500px">
			<el-form :model="state.ruleForm" disabled>
				<el-row class="mb20" :gutter="20">
					<el-col :span="24">
						<el-form-item label="提现订单总金额" prop="supplier_amt">
							<el-input v-model="state.ruleForm.supplier_amt" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="24">
						<el-form-item label="提现订单总运费" prop="trans_amt">
							<el-input v-model="state.ruleForm.trans_amt" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="24">
						<el-form-item label="售后退款总金额" prop="after_supplier_amt">
							<el-input v-model="state.ruleForm.after_supplier_amt" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="24">
						<el-form-item label="提现手续费比例" prop="commission">
							<el-input v-model="state.ruleForm.commission" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="24">
						<el-form-item label="提现手续费" prop="commission_money">
							<el-input v-model="state.ruleForm.commission_money" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="24">
						<el-form-item label="应到账总金额" prop="money_answer">
							<el-input v-model="state.ruleForm.money_answer" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="实到账总金额" prop="money_solid">
							<el-input v-model="state.ruleForm.money_solid" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="state.dialog.submitLoading" size="default">申请提现</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { supplierWithdrawalApi } from '/@/api/supplier';
import { floatMultiply } from '/@/utils/dictionary';

let callback: Function = () => {};
const SupplierWithdrawalApi = supplierWithdrawalApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	ruleForm: {
		supplier_amt: '',
		trans_amt: '',
		commission: '',
		commission_money: '',
		after_supplier_amt: '',
		money_answer: '',
		money_solid: '',
		order_no: '',
		goods_id: '',
		goods_title: '',
		complete_time_start: '',
		complete_time_end: '',
	},
});

/********** 触发事件 **********/

// 取消
const onCancel = () => {
	state.dialog = {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	};
};
// 提交
const onSubmit = () => {
	ElMessageBox.confirm('您确定申请本次提现吗？此操作不可撤回', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			state.dialog.submitLoading = true;
			_applyOrder(state.ruleForm);
		})
		.catch(() => {});
};

/********** 方法事件 **********/
// 打开
const openDialog = (data: any, row: any, fn: Function) => {
	state.dialog.isShowDialog = true;
	state.dialog = {
		isShowDialog: true,
		type: '',
		title: data.title,
		submitLoading: false,
	};
	callback = fn;
	_selectOrderMoneyInformation(row);
};

/********** 网络请求 **********/
// 选中订单金额信息
const _selectOrderMoneyInformation = (params: any) => {
	SupplierWithdrawalApi.selectOrderMoneyInformation(params).then((res) => {
		const info = res.data.info
		state.ruleForm = {
			...params,
			...res.data.info,
			commission: floatMultiply(info.commission, 1000) + '‰'
		};
	});
};
// 申请提现
const _applyOrder = (params: Object) => {
	SupplierWithdrawalApi.applyOrder(params)
		.then(() => {
			ElMessage.success('申请成功！等待平台审核');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
